<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList Jquery</title>

</head>
<script src="./jquery-3.4.1.min.js"></script>
<body>
    <div>
        <input type="text" id='input'>
        <button id='btn'>提交</button>
        <ul id="list"></ul>
     </div>
    <script>
        //原生
       // var dom = document.getById('app');
       // dom.innerHtml = 'hello word';

       //   m数据  v 视图 p控制器 presenter  思想

       function Page(){

       }

       $.extend(Page.prototype,{
           init:function(){
                this.bindEvents()
           },
           bindEvents: function() {
             var btn = $('#btn');
             btn.on('click',$.proxy(this.handleBtnClick,this))
           },
           handleBtnClick:function(){
               var inputValue = $('#input').val();
               var ulElem = $("#list");
               ulElem.append('<li>'+inputValue+'</li>');
               inputValue.val('');
           }
       })
       var page = new Page();

       


    </script>
</body>
</html>